<template>
    <div class="renellm">
        <my-layout>
            <!-- 插入主内容区的内容 -->
            <template v-slot:main>
                <el-table  class="main_table"  :default-sort = "{prop: 'Avg', order: 'ascending'}"
                           :data="tableData"    @sort-change="handleSortChange"
                           style="min-width:100%; width: max-content;">
                    <el-table-column type="index" minWidth="40"  min-width="50"  width="50"></el-table-column>
                    <el-table-column prop="Model" label="Model" min-width="130">
                        <template slot-scope="{row}">
                            <el-tooltip class="item" effect="dark" :content="row.Model" placement="top">
                                <span>{{row.Model}}</span>
                            </el-tooltip>
                            <p class="txt">{{row.Developer}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="Parameters" label="Parameters" min-width="130"  width="130">
                    </el-table-column>
                    <el-table-column min-width="110"  width="110"
                            prop="Avg"
                            label="Avg"    :sortable="'custom'"
                         >
                    </el-table-column>
                    <el-table-column label="ReNeLLM" prop="ReNeLLM"  :sortable="'custom'" min-width="120"  width="120">
                        <template slot="header" slot-scope="{column}">
                            <span class="field_head" @click="goDetails(column.property)">{{column.label}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="GPTFuzz"  min-width="130"  width="130"
                            :sortable="'custom'"
                            label="GPTFuzz">
                        <template slot="header" slot-scope="{column}">
                            <span class="field_head" @click="goDetails(column.property)">{{column.label}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="ICA"  min-width="110"  width="110"
                            :sortable="'custom'"
                            label="ICA">
                        <template slot="header" slot-scope="{column}">
                            <span class="field_head" @click="goDetails(column.property)">{{column.label}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="AutoDAN"  min-width="130"  width="130"
                            :sortable="'custom'"
                            label="AutoDAN">
                        <template slot="header" slot-scope="{column}">
                            <span class="field_head" @click="goDetails(column.property)">{{column.label}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="PAIR"  min-width="120"  width="120"
                            :sortable="'custom'"
                            label="PAIR">
                        <template slot="header" slot-scope="{column}">
                            <span class="field_head" @click="goDetails(column.property)">{{column.label}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="JailBroken" min-width="130"  width="130"
                            :sortable="'custom'"
                            label="JailBroken">
                        <template slot="header" slot-scope="{column}">
                            <span class="field_head" @click="goDetails(column.property)">{{column.label}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column
                            prop="Cipher" min-width="135"  width="135"
                            :sortable="'custom'"
                            label="Cipher">
                        <template slot="header" slot-scope="{column}">
                            <span class="field_head" @click="goDetails(column.property)">{{column.label}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  min-width="170"  width="170"
                            prop="DeepInception"
                            :sortable="'custom'"
                            label="DeepInception">
                        <template slot="header" slot-scope="{column}">
                            <span class="field_head" @click="goDetails(column.property)">{{column.label}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="170"  width="170"
                            prop="MultiLingual"
                            :sortable="'custom'"
                            label="MultiLingual">
                        <template slot="header" slot-scope="{column}">
                            <span class="field_head" @click="goDetails(column.property)">{{column.label}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="GCG"  min-width="120"  width="120"
                            :sortable="'custom'"
                            label="GCG">
                        <template slot="header" slot-scope="{column}">
                            <span class="field_head" @click="goDetails(column.property)">{{column.label}}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </my-layout>
    </div>
</template>

<script>
  import MyLayout from '@/views/MyLayout.vue'
  import staticDb from '../db/staticDb.js'
  export default {
    name: 'Leaderboard',
    components: {
      MyLayout
    },
    data() {
      return {
        tableData: staticDb.mainTableDb,
        unsortedData : []
      };
    },
    methods:{
      handleSortChange({ prop, order }) {
        console.log(prop,order)
        // 过滤出可排序数据
        const sortableData = this.tableData.filter(item => item.sortable);
        // 排序
        if (order === 'ascending') {
          sortableData.sort((a, b) => parseFloat(a[prop]) - parseFloat(b[prop]))
        } else {
          sortableData.sort((a, b) => parseFloat(b[prop]) - parseFloat(a[prop]))
        }

        this.tableData = [...sortableData, ...this.unsortedData];
      },
      goDetails(fn){
        this.$router.push({
          path:`/${fn}`
        })
      }
    },
    mounted(){
        this.handleSortChange({prop:'Avg', order:'ascending'});
    },
    created() {
      const unsortedData = [];
      for(let item of this.tableData){
        if(!item.sortable){
          unsortedData.push(item);
        }
      }
      this.unsortedData = unsortedData;
    }
  };
</script>

<style lang="scss">
    .main_table{
        font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
        .field_head:hover{text-decoration: underline; color:#409eff}
        .el-table__cell{padding: 8px 0;}
        th.el-table__cell{color: rgba(0, 0, 0, 0.88);font-weight: 600;text-align: start; background: #f5f6fd;
            border-bottom: 1px solid #f0f0f0;transition: background 0.2s ease;}
        .txt{font-size: 12px;  max-width: 150px;  color: #12131659; margin: 5px 0;
            overflow: hidden;  text-overflow: ellipsis;  display: -webkit-box;
            -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
        background-color: #f3c5c5; /* 设置背景色为淡红色 */
    }
</style>
